import React, { useState } from 'react';

const menus = [
  {
    label: '编辑：已有节点上修改',
    path: 'edit',
  },
  {
    label: '编辑：完全自定义节点',
    path: 'editcustom',
  },
  {
    label: '预览',
    path: 'view',
  },
];

const Menu = (props) => {
  const { location: { pathname = '' } = {} } = props;

  const onClick = (e) => {
    props.history.pushPath(e.path);
    console.log('onClick', e, props);
  };

  return [
    <div className="comp-menu">
      {menus.map((d) => (
        <span
          className={`comp-menu-item ${pathname === '/' + d.path ? 'active' : ''}`}
          onClick={() => onClick(d)}
        >
          {d.label}
        </span>
      ))}
    </div>,
    props.children,
  ];
};

export const withMenu = (Comp) => (props) => (
  <Menu {...props}>
    <Comp {...props} />
  </Menu>
);

export default Menu;
